/*
 * @Author: your name
 * @Date: 2021-04-30 10:21:08
 * @LastEditTime: 2022-04-07 17:52:07
 * @LastEditors: your name
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \react-gu-li\src\components\left-nav\left-nav.jsx
 */
import React, { Component } from "react";
import "./index.less";
import logo from "../../assets/images/logo_1.jpg";
import { Link,withRouter } from "react-router-dom";
import { Menu } from "antd";
import menuList from "../../config/menuConfig";

const { SubMenu } = Menu;

class LeftNav extends Component {
  // 根据menu数据数组生成对应标签数组两种方法
  // 方法一: map+递归方法
  // getMenuNodes = (menuList) => {
  //   return menuList.map(item => {
  //     if(!item.children) {
  //       return (
  //         <Menu.Item key={item.key}>
  //           {item.icon}
  //           <Link to={item.key}>{item.title} </Link>
  //         </Menu.Item>
  //       );
  //     }else {
  //       return (
  //         <SubMenu key={item.key} icon={item.icon} title={item.title}>
  //           {/* //递归 */}
  //           {this.getMenuNodes(item.children)}
  //         </SubMenu>
  //       );
  //     }
  //   })
  // }
  // 方法二: 数组的reduce方法
  getMenuNodes = (menuList) => {
    return menuList.reduce((pre, item) => {
      // 像pre中添加<menu.Item/>或者<SubMenu/>
      if (!item.children) {
        pre.push(
          <Menu.Item icon={item.icon} key={item.key}>
            <Link to={item.key}>{item.title}</Link>
          </Menu.Item>
        );
      } else {
        // 如果当前所在菜单存在子菜单且所处路由是子菜单里的某一个,就一直展开当前菜单项,刷新也不会关闭
        const path = this.props.location.pathname;  //当前请求的路由路径
        const curItem = item.children.find((cItem) => cItem.key === path);
        // 如果curItem存在,说明当前item存在子菜单,要展开
        if (curItem) {
          this.openKey = item.key;
        }

        pre.push(
          <SubMenu icon={item.icon} key={item.key} title={item.title}>
            {/* //递归 */}
            {this.getMenuNodes(item.children)}
          </SubMenu>
        );
      }
      return pre
    }, []);
  };
  // 在第一次render执行之前执行一次,为第一个render准备数据(必须同步的)
  componentWillMount() {
    this.menuNodes = this.getMenuNodes(menuList);
  }
  render() {
    // 细节: 这里要获取当前路由,来确选中的导航,但是这是个一般组件,没有location的,所以withRouter
    const path = this.props.location.pathname;
    return (
      <div className="left-nav">
        <Link to="/" className="header">
          <img src={logo} alt="" />
          <h1>XXX后台</h1>
        </Link>

        <div>
          <Menu
            defaultOpenKeys={[this.openKey]}
            selectedKeys={[path]}
            mode="inline"
            theme="dark"
          >
            {this.menuNodes}
          </Menu>
        </div>
      </div>
    );
  }
}
// withRouter是高阶组件:
// 用来包装非路由组件,返回一个新组件
// 新组件向非路由组件传递3个属性,history/location/match
export default withRouter(LeftNav)
